<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树图-边上显示label</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.hierarchy-0.5.0/build/hierarchy.js"></script>
<script>
    var data = {
        isRoot: true,
        id: 'Root',
        style: {
            fill: 'red'
        },
        children: [{
            id: 'SubTreeNode1',
            raw: {},
            children: [{
                id: 'SubTreeNode1.1'
            }, {
                id: 'SubTreeNode1.2',
                children: [{
                    id: 'SubTreeNode1.2.1'
                }, {
                    id: 'SubTreeNode1.2.2'
                }, {
                    id: 'SubTreeNode1.2.3'
                }]
            }]
        }, {
            id: 'SubTreeNode2',
            children: [{
                id: 'SubTreeNode2.1'
            }]
        }, {
            id: 'SubTreeNode3',
            children: [{
                id: 'SubTreeNode3.1'
            }, {
                id: 'SubTreeNode3.2'
            }, {
                id: 'SubTreeNode3.3'
            }]
        }, {
            id: 'SubTreeNode4'
        }, {
            id: 'SubTreeNode5'
        }, {
            id: 'SubTreeNode6'
        }, {
            id: 'SubTreeNode7'
        }, {
            id: 'SubTreeNode8'
        }, {
            id: 'SubTreeNode9'
        }, {
            id: 'SubTreeNode10'
        }, {
            id: 'SubTreeNode11'
        }]
    };
    var graph = new G6.TreeGraph({
        container: 'mountNode',
        width: window.innerWidth,
        height: window.innerHeight,
        pixelRatio: 2,
        linkCenter: true,
        modes: {
            default: [{
                type: 'collapse-expand',
                onChange: function onChange(item, collapsed) {
                    var data = item.get('model').data;
                    data.collapsed = collapsed;
                    return true;
                }
            }, 'drag-canvas', 'zoom-canvas']
        },
        defaultNode: {
            size: 30,
            style: {
                fill: '#40a9ff',
                stroke: '#096dd9'
            }
        },
        defaultEdge: {
            style: {
                stroke: '#A3B1BF'
            }
        },
        layout: {
            type: 'compactBox',
            direction: 'LR',
            getId: function getId(d) {
                return d.id;
            },
            getHeight: function getHeight() {
                return 16;
            },
            getWidth: function getWidth() {
                return 16;
            },
            getVGap: function getVGap() {
                return 50;
            },
            getHGap: function getHGap() {
                return 100;
            }
        }
    });

    graph.node(function(node) {
        return {
            size: 16,
            anchorPoints: [[0, 0.5], [1, 0.5]],
            style: {
                fill: '#40a9ff',
                stroke: '#096dd9'
            },
            label: node.id,
            labelCfg: {
                position: node.children && node.children.length > 0 ? 'left' : 'right'
            }
        };
    });
    var i = 0;
    graph.edge(function() {
        i++;
        return {
            shape: 'cubic-horizontal',
            color: '#A3B1BF',
            label: i
        };
    });

    graph.data(data);
    graph.render();
    graph.fitView();
</script>
</body>
</html>
